<template>
  <div class="wrap">
    <div class="recharge-log">
      <div class="recharge-content">
        <div class="recharge-header">
          <div>
            <div style="font-size: 18px; font-weight: bold">
              {{ $t('pay.账户余额') }}：
              <span style="color: red">{{ user_amount }} 元</span>
              <span style="font-size: 18px; font-weight: bold; margin-left: 100px">
                <el-tooltip class="item" effect="dark" placement="top">
                  <template #content>{{ $t('pay.当前列表所有变更记录的变更金额合计(按变更类型和时间筛选实时统计)') }}</template>
                  <i class="el-icon-question" style="color: #55aaff"></i>
                </el-tooltip>
                {{ $t('pay.合计变更金额') }}：
                <span style="color: red">{{ totalAmount }} 元</span>
              </span>
            </div>
            <div style="margin-top: 10px; font-size: 18px; font-weight: bold">{{ $t('pay.累计充值') }}：{{ totalRecharge }} 元</div>
            <el-tag style="cursor: pointer" @click="showTable" v-if="false">{{ !allTable ? '展开' : '收起' }}</el-tag>
          </div>

          <template v-if="!$store.getters.isHiddenPay">
            <div>
              <template v-if="$store.getters.payPageType === 'POP'">
                <recharge></recharge>
              </template>
              <template  v-if="$store.getters.payPageType === 'SKIP'">
                <recharge-skip></recharge-skip>
              </template>
              <div style="margin-top: 10px">
                <el-button type="primary" @click="rechargeLog()">{{ $t('route.rechargeLog') }}</el-button>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="content-table">
      <div class="table">
        <div class="search">
          <div class="left">
            <el-cascader
              :options="bTypeList"
              :props="{ value: 'value', label: 'name', children: 'children', multiple: true }"
              v-model="types"
              clearable
              @change="changeOption"
              class="mgr10"
            ></el-cascader>

            <diy-date
              style="display: inline-block; margin-right: 20px"
              v-model="query.times"
              @change="changeOption()"
              :set-api-times="1"
              :set-day-type="30"
              :disdisabled="loading"
            ></diy-date>
            <!-- 导出 -->
            <export-button :func="getAmountRecordData" :query-params="query" :exportType="'user_amount_list'" :getTotal="total"></export-button>
          </div>
          <div class="right"></div>
        </div>
        <div>
          <el-table :data="dateData" :border="true" v-loading="loading" stripe ref="tableDate">
            <el-table-column prop="createTime" :label="$t('table.变更时间')" align="center" min-width="100" fixed></el-table-column>
            <el-table-column prop="type" :label="$t('table.变更类型')" align="center" min-width="100">
             <!-- <template slot-scope="{ row }">
                {{ getChangeTypeStr(row.type) }}
              </template> -->
            </el-table-column>
            <el-table-column prop="before_amount" :label="$t('table.变更前金额')" align="center" min-width="100"></el-table-column>
            <el-table-column prop="amount" :label="$t('table.变更金额')" align="center" min-width="120"></el-table-column>
            <el-table-column prop="after_amount" :label="$t('table.变更后金额')" align="center" min-width="120"></el-table-column>
            <el-table-column prop="remark" :show-overflow-tooltip="true" :label="$t('table.备注')" align="center" min-width="120"></el-table-column>
          </el-table>
          <div class="page-wrap" style="margin-top: 10px">
            <el-pagination
              @size-change="sizeChange"
              @current-change="getData"
              :current-page.sync="query.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="$t('route.rechargeLog')" :visible.sync="dialogVisible" width="80%">
      <span>
        <div class="table">
          <el-table border :data="data">
            <el-table-column prop="createTime" :label="$t('table.createTime3')" align="center"></el-table-column>
            <template v-if="$store.getters.payPageType === 'POP'">
              <el-table-column prop="payPredictAmount" :label="$t('pay.Recharge amount') + `(￥)`" align="center"></el-table-column>
            </template>
            <template v-else>
              <el-table-column prop="amount" :label="$t('pay.Recharge amount') + `(￥)`" align="center"></el-table-column>
            </template>
            <el-table-column prop="amount" :label="$t('pay.Amount received') + `(￥)`" align="center"></el-table-column>
            <el-table-column prop="type" :label="$t('pay.Recharge method')" align="center">
              <template slot-scope="{ row }">
                {{ getPayTypeStr(row.type) }}
              </template>
            </el-table-column>
            <template>
              <el-table-column prop="payArrivalStatus" :label="$t('pay.Top up status')" align="center"></el-table-column>
            </template>
          </el-table>
          <div class="page-wrap" style="margin-top: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="rechargeLog"
              :current-page.sync="queryParams.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
            ></el-pagination>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Recharge from '@/layout/components/Recharge/index';
import RechargeSkip from '@/layout/components/RechargeSkip';
import { getRechargeLog } from '@/api/wxPay';
import { getAppName } from '@/utils/settings';
import { getPayTypeStr,getChangeTypeStr } from '@/utils';
import DiyDate from '@/views/order/components/DiyDate.vue';
import ExportButton from "@/views/order/components/ExportButton.vue";
import {getAllAmountType, getAmountRecordData} from "@/api/amount";
export default {
  name: 'rechargeLog',
  components: {
    Recharge,
    RechargeSkip,
    DiyDate,
    ExportButton
  },
  computed: {
    data() {
      const data = [];
      this.tableData.forEach((item) => {
        // if(!this.allTable && data.length >= 3){
        //   return
        // }
        data.push(item);
      });
      return data;
    },
    typeOptions(){
      const options = [];
      return this.bTypeList.map((item) => {
        const obj = {};
        obj.value = item.value;
        obj.label = item.name;
        obj.children = item.children.map((ii)=>{
          return {
            value: ii.value,
            label: ii.name,
          }
        })
        return obj
      });
    },
  },
  data() {
    return {
      allTable: false,
      tableData: [],
      getAppName,
      queryParams: {
        page: 1,
        pageSize: 20
      },
      query: {
        page: 1,
        pageSize: 20,
        times: [],
        types: [], // 小类型
        bTypes: [], // 大类型
      },
      count: 0,
      total: 0,
      loading: false,
      dialogVisible: false,
      dateData: [],
      totalAmount: 0,
      user_amount: 0,
      totalRecharge: 0,
      getAmountRecordData,
      typeList: [], // 小类型
      bTypeList: [], // 大类型
      types: [],
    };
  },
  created() {
    this.getType();
    this.getData();
  },
  methods: {
    getPayTypeStr,
    getChangeTypeStr,
    getData() {
      this.loading = true;
      getAmountRecordData(this.query).then((res) => {
        this.loading = false;
        this.dateData = res.data;
        this.total = res.info.total;
        this.totalAmount = res.info.totalAmount;
        this.user_amount = res.info.user_amount;
        this.totalRecharge = res.info.totalRecharge;
      });
    },
    getType(){
      getAllAmountType()
        .then(res=>{
          const {arrTypeList, typeList} = res.data
          this.typeList = typeList;
          this.bTypeList = arrTypeList;
          console.log(arrTypeList)
        })
    },
    rechargeLog() {
      this.dialogVisible = true;
      getRechargeLog(this.queryParams).then((res) => {
        this.tableData = res.data;
        this.count = res.info.total;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.page = 1;
      this.rechargeLog();
    },
    sizeChange(val) {
      this.query.pageSize = val;
      this.query.page = 1;
      this.getData();
    },
    changeOption(){
      this.query.page = 1;
      this.query.types = this.types.map(item=>{
        return item[1]
      }) // 父节点无意义 只需要子节点
      this.getData()
    },
    showTable() {
      this.allTable = !this.allTable;
    }
  }
};
</script>
<style lang="scss"></style>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;
  min-height: calc(100vh - 100px);
  background: #fafafb;
  .recharge-log {
    // width: 1000px;
    // min-height: calc(100vh - 100px);
    padding: 20px 50px;
    background: #ffffff;
  }
}
.header-card {
  width: 100%;
  height: 80px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  .left {
    float: left;
    .avatar {
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .user {
      font-size: 14px;
      margin-top: 10px;
      margin-left: 20px;
      float: left;
      line-height: 30px;
      .user-text-1 {
        font-weight: 500;
      }
    }
  }
  .right {
    float: right;
    height: 100%;
    padding: 5px 10px;
    background: #ff7d0a;
    border-radius: 3px;
    border: 1px solid #ff7d0a;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text1 {
      font-weight: 650;
      font-size: 14px;
    }
    .text2 {
      font-weight: 700;
      font-size: 19px;
    }
    .text3 {
      font-weight: 400;
      font-size: 11px;
    }
  }
}
.recharge-content {
  margin-top: 20px;
  .recharge-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
